<template>
  <div>
      <div class="column">
          <div class="map">
              <h3>
                  <span class="icon-cube">
                      设备数据统计
                  </span>
              </h3>
              <div class="chart">
                <div class="geo" ref="geo" @georoam='tuo()'></div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import china from '../../assets/chinaMap/china.json'
export default {
    async mounted(){
            let mapCode = china
            this.$echarts.registerMap('china', mapCode);
            let chart = this.$echarts.init(this.$refs.geo)

            var points = [
                { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }  // 江苏
                , { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }  // 黑龙江
                , { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }  // 内蒙古
                , { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }  // 吉林
                , { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }  // 北京
                , { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' } }  // 辽宁
                , { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }  // 河北
                , { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }  // 天津
                , { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }  // 山西
                , { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }  // 陕西
                , { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } } // 甘肃
                , { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }  // 宁夏
                , { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }  // 青海
                , { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }  // 四川
                , { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }  // 重庆
                , { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }  // 湖南
                , { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } } // 云南
                , { value: [119.4543, 25.9222] }, // 福建
                , { value: [87.61 , 43], itemStyle: { color: 'DeepSkyBlue' } }  // 新疆
                , { value: [89.13 , 30.66], itemStyle: { color: '#96cc34' } } // 西藏
                , { value: [106.91 , 27], itemStyle: { color: 'Yellow' } }  // 贵州
                , { value: [108.67 , 23.68], itemStyle: { color: 'DarkOrange' } }  // 广西
                , { value: [112.98 , 23.82], itemStyle: { color: 'IndianRed' } }  // 广东
                , { value: [110.03 , 19.33], itemStyle: { color: '#33FF66' } }  // 海南
                , { value: [115.89 , 27.97], itemStyle: { color: '#5500dd' } }  // 江西
                , { value: [120.15 , 30], itemStyle: { color: 'lvory' } }  // 浙江
                , { value: [121.46 , 31.28], itemStyle: { color: 'LightSalmon' } }  // 上海
                , { value: [113.46 , 34.25], itemStyle: { color: '#FAEBD7' } }  // 河南
                , { value: [112.29 , 30.98], itemStyle: { color: '#4169E1' } }  // 湖北
                , { value: [118.01 , 36.37], itemStyle: { color: '#FF00FF' } }  // 山东
                , { value: [117.28 , 31.86], itemStyle: { color: '#FFB6C1' } }  // 安徽
                , { value: [121.01 , 23.54], itemStyle: { color: '#96cc34' } }  // 台湾
            ]
            let option = {
                backgroundColor: '',
                geo: {
                    map: 'china',
                    aspectScale: 0.75, //长宽比
                    zoom: 1.2,
                    roam: true,
                    type: 'map',
                    zlevel:0,
                    label: {
                        show: true,
                        color: '#eee',
                        emphasis: {
                            color: '#fff'
                        }
                    },
                    itemStyle: {
                        borderColor: 'rgba(58, 128, 177, 0.9)',
                        borderWidth: 1,
                        areaColor: "rgba(27, 73, 135, 0.8)",
                        emphasis: {
                            areaColor: "rgba(0,0,0,0.1)",
                            borderWidth: 1,
                        },
                        select:{
                            disabled:false,
                            areaColor:'rgba(27, 73, 135, 0.8)'
                        }
                    },
                },
                series: [
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    showEffectOn: 'render',
                    zlevel: 1,
                    symbolSize: 6,
                    data: points,
                    rippleEffect: {
                        period: 15,
                        scale: 2,
                        brushType: 'stroke'
                    },
                }, 
                //地图线的动画效果
                {
                    type: 'lines',
                    zlevel: 2,  // 分层
                    coordinateSystem:'geo',  // 该系列使用的坐标系
                    effect: {
                        show: true,
                        period: 5, //箭头指向速度，值越小速度越快
                        trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow',  // 箭头图标
                        symbolSize: 4, //图标大小
                        animation:false,
                    },
                    lineStyle: {
                        color: '#1DE9B6',
                        width: 0.3, //线条宽度
                        opacity: 0.1, //尾迹线条透明度
                        curveness: 0.4, //尾迹线条曲直度
                        type: 'dashed',  // 线条类型
                    },
                    data: [
                        { coords: [[118.8062, 31.9208], [116.4551, 40.2539]], lineStyle: { color: '#4ab2e5' } }
                        , { coords: [[127.9688, 45.368], [103.9526, 30.7617]], lineStyle: { color: '#4fb6d2' } }
                        , { coords: [[110.3467, 41.4899], [103.9526, 30.7617]], lineStyle: { color: '#52b9c7' } }
                        , { coords: [[125.8154, 44.2584], [116.4551, 40.2539]], lineStyle: { color: '#5abead' } }
                        , { coords: [[116.4551, 40.2539], [108.384366, 30.439702]], lineStyle: { color: '#f34e2b' } }
                        , { coords: [[123.1238, 42.1216], [114.4995, 38.1006]], lineStyle: { color: '#f56321' } }
                        , { coords: [[112.29 , 30.98], [116.4551, 40.2539]], lineStyle: { color: '#f56f1c' } }
                        , { coords: [[117.4219, 39.4189], [108.384366, 30.439702]], lineStyle: { color: '#f58414' } }
                        , { coords: [[112.3352, 37.9413], [106.3586, 38.1775]], lineStyle: { color: '#f58f0e' } }
                        , { coords: [[109.1162, 34.2004], [116.4551, 40.2539]], lineStyle: { color: '#f5a305' } }
                        , { coords: [[103.5901, 36.3043], [109.1162, 34.2004]], lineStyle: { color: '#e7ab0b' } }
                        , { coords: [[106.3586, 38.1775], [108.384366, 30.439702]], lineStyle: { color: '#dfae10' } }
                        , { coords: [[101.4038, 36.8207], [116.4551, 40.2539]], lineStyle: { color: '#d5b314' } }
                        , { coords: [[103.9526, 30.7617], [116.4551, 40.2539]], lineStyle: { color: '#c1bb1f' } }
                        , { coords: [[108.384366, 30.439702], [108.384366, 30.439702]], lineStyle: { color: '#b9be23' } }
                        , { coords: [[113.0823, 28.2568], [116.4551, 40.2539]], lineStyle: { color: '#a6c62c' } }
                        , { coords: [[102.9199, 25.46639], [108.384366, 30.439702]], lineStyle: { color: '#96cc34' } }
                        , { coords: [[87.61 , 43], [116.4551, 40.2539]], lineStyle: { color: '#f34e2b' } }
                        , { coords: [[89.13 , 30.66], [114.4995, 38.1006]], lineStyle: { color: '#f56321' } }
                        , { coords: [[121.01 , 23.54], [118.01 , 36.37]], lineStyle: { color: '#FF00FF' } }
                        , { coords: [[115.89 , 27.97], [121.46 , 31.28]], lineStyle: { color: 'LightSalmon' } }
                        , { coords: [[110.03 , 19.33], [120.15 , 30]], lineStyle: { color: 'lvory' } }
                        , { coords: [[119.4543, 25.9222], [106.91 , 27]], lineStyle: { color: 'yellow' } }
                        , { coords: [[108.67 , 23.68], [117.28 , 31.86]], lineStyle: { color: '#FFB6C1' } }
                        , { coords: [[112.98 , 23.82], [113.46 , 34.25]], lineStyle: { color: '#FAEBD7' } }
                    ]
                }
                ]
            };
            chart.setOption(option, true);
    },
    data(){
        return{
        }
    }
}
</script>

<style scoped>
    .map{
        height: 9.35rem;
        margin-bottom: 0.2rem;
        display: flex;
        flex-direction: column;
    }
    .map h3{
        line-height: 2.4;
        padding: 0 0.5rem;
        margin: 0;
        font-size: 0.33rem;
        color: #fff;
        font-weight: 400;
    }
    .map .icon-cube{
        color: #fff;
    }
    .map .chart{
        flex: 1;
        background-color: rgba(255,255,255,0.05);
    }
    .map .geo{
        width: 100%;
        height: 100%;
    }
</style>